<template>
  <div>
    <h1>添加收货地址</h1>
    <div class="people">
        <span>收货人</span> <input type="text" v-model="people"> 
    </div>
    <div class="phone">
       <span>收货人电话</span> <input type="text" v-model="phone" @blur="H4()"> <br><span v-if="type" style="color:red">请输入正确的手机号</span>
    </div>
   
    <el-form class="city">
            <el-form-item label="收货地址" >
                <el-select
                  v-model="selectProvince"
                  placeholder="请选择省"
                  style="width: 145px"
                >
                  <el-option
                    v-for="item in provinces"
                    size="small"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    @click.native="changeProvince()"
                  >
                  </el-option>
                </el-select>
                <el-select
                  v-model="selectCity"
                  placeholder="请选择市"
                  style="width: 145px"
                >
                  <el-option
                    v-for="item in cities"
                    size="small"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    @click.native="changeCity"
                  >
                  </el-option>
                </el-select>
                <el-select
                  v-model="selectArea"
                  placeholder="请选择区"
                  style="width: 145px"
                >
                  <el-option
                    v-for="item in area"
                    size="small"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
          </el-form>
          <div class="adress">
          <span>详细地址</span> <input type="text" v-model="address">
          </div>
          <span class="defult">设置为默认地址</span> <br>
         
  <el-switch class="switch"
    v-model="value"
    active-color="#13ce66"
    inactive-color="#ff4949"
    active-value="0"
    inactive-value="1">
  </el-switch>
          <div>
        <el-button class="b" type="text"  @click="add">添加</el-button>
        <el-button class="c" type="text" @click="back">返回</el-button>
          </div>
         
  </div>
</template>

<script>
import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'
import router from "@/router";
export default {
   data(){
     return{
        //省市区联动下拉框
      provinces: regionData,
      cities: [],
      area: [],
      selectProvince: "",
      selectCity: "",
      selectArea: "",
      people:'',
      phone:'',
      address:'',
      formLabelWidth:"",
      value:0,
      type:false,
      userId:'',
     }
   },
     mounted(){
       let jsonUser = sessionStorage.getItem("user")
         console.log(jsonUser)
         let jsonObj=JSON.parse(jsonUser)
         this.userId = jsonObj.userId
        console.log(this.userId)
     },
   methods:{
        H4(){
         let tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
         let telphone = tel.test(this.phone)
         if(telphone){
           this.type =false
         }else{
           this.type = true
         }
       },
     changeProvince() {
       //console.log(this.provinces)
       //console.log(this.selectProvince)
      this.cities = [];
      this.area = [];
      this.selectCity = "";
      this.selectArea = "";
      let cityItem = this.provinces.filter(
        (item) => item.value === this.selectProvince
      );
      if (cityItem[0]) {
        this.cities = cityItem[0].children;
      }
    },
    changeCity() {
      console.log("城市选择")
      console.log(this.selectCity)
      this.area = [];
      this.selectArea = "";
      let areaItem = this.cities.filter(
        (item) => item.value === this.selectCity
      );
      if (areaItem[0]) {
        this.area = areaItem[0].children;
      }
    },
    add(){
         if(this.value ==0){
            let addProvince= CodeToText[this.selectProvince]
     let addCity= CodeToText[this.selectCity]
     let addDistrict = CodeToText[this.selectArea]
     let fd1 = new FormData
      fd1.append("userId",this.userId)
 this.$axios.post("/api/userAddress/addAddressUpdateDefultAddress",fd1).then(
        res=>{
          console.log(res.data)
        }
      )

      let fd = new FormData
      fd.append("addPerson",this.people)
      fd.append("addPhone",this.phone)
      fd.append("addProvince",addProvince)
      fd.append("addCity",addCity)
      fd.append("addDistrict",addDistrict)
      fd.append("addDetail",this.address)
      fd.append("userId",this.userId)
      fd.append("status",0)
      this.$axios.post("/api/userAddress/addAddress",fd).then(
        res=>{
          console.log(res.data)
        }
      )
         }else{
            let addProvince= CodeToText[this.selectProvince]
     let addCity= CodeToText[this.selectCity]
     let addDistrict = CodeToText[this.selectArea]
      let fd = new FormData
      fd.append("addPerson",this.people)
      fd.append("addPhone",this.phone)
      fd.append("addProvince",addProvince)
      fd.append("addCity",addCity)
      fd.append("addDistrict",addDistrict)
      fd.append("addDetail",this.address)
      fd.append("userId",this.userId)
      fd.append("status",1)
      this.$axios.post("/api/userAddress/addAddress",fd).then(
        res=>{
          console.log(res.data)
        }
      )
         }
    
      // this.$router.push("/getGoodsAddress")
      router.back()
    },
    back(){
      // this.$router.push("/getGoodsAddress")
      router.back()
    }
   }
    
}
</script>

<style>
 
.city{
  width: 200px;
  height: 200px;
  margin: auto;
}

.people{
  width: 200px;
  height: 100px;
  margin: auto;
}
.phone{
  width: 200px;
  height: 100px;
  margin: auto;
}

.adress{
  width: 200px;
  height: 100px;
  margin: auto;
}
.b{
  margin-top: 50px;
  margin-left: 800px;
}

.c{
  margin-top: 50px;
  margin-left: 500px;
}
.switch{
  margin-left: 750px;
}
.defult{
  margin-left: 750px;
}

</style>